<template>
  <div class="base-component">
    <!-- 批量导入 -->
    <div>
      <div>按钮权限</div>
      <div>
        <a-button v-permission="['pms:order:delete']" type="primary"
          >新增</a-button
        >
      </div>
    </div>
    <div class="baserow">
      <span>批量导入</span>
      <batch-import :cols="cols"></batch-import>
    </div>
    <a-divider />
    <!-- 字典选择框 -->
    <div class="baserow">
      <span>字典选择框</span>
      <dict-select
        v-model="form.test"
        style="width: 200px"
        allow-clear
        dict-type="loginReultType"
        placeholder="请选择"
      ></dict-select>
      <span>{{ form.test }}</span>
    </div>
    <a-divider />

    <!-- 关注工作 -->
    <div class="baserow">
      <span>关注工作</span>
      <focus-on-work-btn :params="{ id: '1111' }"></focus-on-work-btn>
    </div>
    <a-divider />

    <!-- 提交审批 -->
    <div class="baserow">
      <span>提交审批</span>
      <submit-approval-page
        title="流程提交"
        btn-title="提交流程"
        :params="{ id: '1111' }"
      ></submit-approval-page>
    </div>
    <a-divider />
    <div class="baserow">
      <span>选择人员</span>
      <userSelect
        v-if="visible1"
        key="user"
        v-model:user="user"
        :type="'user'"
        :title="'申请人'"
        @close="close"
      />
      <a-button type="primary" @click="selectUser">选择人员</a-button>
    </div>
    <div>{{ user }}</div>
    <a-divider />
    <div class="baserow">
      <span>选择部门</span>
      <userSelect
        v-if="visible"
        key="deot"
        v-model:dept="deptData"
        :type="'dept'"
        :title="'申请人'"
        @close="close"
      />
      <a-button type="primary" @click="selectDept">选择部门</a-button>
    </div>
    <div>{{ deptData }}</div>
    <a-divider />
    <div class="baserow">
      <span style="width: 320px">筛选框-弹出筛选-表格选择</span>
      <inputModal
        v-model="value"
        :label-value="value"
        :value-name="'name'"
        :title="'供应商名称'"
        :type="'supplyName'"
      />
    </div>
    <div>value：{{ value }}</div>
    <div class="baserow">
      <span style="width: 320px">筛选框-弹出筛选-表格选择</span>
      <inputModal
        v-model="valueObj"
        :label-value="value"
        :value-name="'name'"
        :label-name="'name'"
        :title="'供应商名称'"
        :type="'supplyName'"
      />
    </div>
    <div>valueObj:{{ valueObj }}</div>
    <div class="baserow">
      <span style="width: 300px">筛选框-弹出筛选-选择人员</span>
      <searchItemUser v-model="value" v-model:name="name" :title="'申请人'" />
    </div>
    <div>value:{{ value }}</div>
    <div>name:{{ name }}</div>
    <div class="baserow">
      <span style="width: 300px">筛选框-弹出筛选-选择部门</span>
      <dept v-model="value" v-model:name="name" :title="'选择部门'" />
    </div>
    <div>value:{{ value }}</div>
    <div>name:{{ name }}</div>
    <div class="baserow">
      <span style="width: 300px">密级-select</span>
      <secretLevelSelect :secret-level="2" />
    </div>
    <div class="baserow">
      <span style="width: 300px">密级-table</span>
      <secretLevelInfo
        :record="{ secretLevel: '7', secretLevelLabel: '密级' }"
      />
    </div>
    <div>
      <a-button type="primary" @click="asyncHandle">modal-promise</a-button>
    </div>
    <div class="baserow">
      <sub-title>副标题</sub-title>
    </div>
    <div>
      <page-title :isline="true">主标题</page-title>
    </div>
    <a-divider />
    <div class="baserow">
      <span style="width: 320px">多选文件上传文件上传（带列表）</span>
      <fileUpload
        v-model="fileValueList"
        multiple
        :show-file-list="true"
        :file-list="defaultList"
        btn-name="文件上传"
        btn-type="text"
        accept=".xlsx,.pdf,.doc,.docx"
        title="供应商文件上传"
      />
    </div>
    <div class="baserow">
      <span>{{ fileValueList }}</span>
    </div>
    <div class="baserow">
      <span style="width: 320px">单选文件上传文件上传</span>
      <fileUpload
        v-model="fileValue"
        :multiple="false"
        btn-name="文件上传"
        btn-type="text"
        accept=".xlsx,.pdf,.doc,.docx"
        title="供应商文件上传"
      />
      <span>{{ fileValue }}</span>
    </div>
    <div class="baserow">
      <span style="width: 320px">excel导出</span>
      <code>
        <!-- eslint-disable-next-line prettier/prettier -->
        import { downFileToExcel } from '@/common/utils/downFile';
        <br />
        const { data, fileName } = await purchasePlanExport();
        <br />
        downFileToExcel(fileName, data);
        <br />
        <!-- eslint-disable-next-line prettier/prettier -->
        // purchasePlanExport 是自己写的接口 例如： export function
        purchasePlanExport(data: any) { return requestForFile.post(
        <!-- eslint-disable-next-line prettier/prettier -->
        '/api/procurement/require/plan-list/export ', data, { responseType:
        'blob',
        <!-- eslint-disable-next-line prettier/prettier -->
        } ); }
      </code>
    </div>
  </div>
</template>

<!--新script-->
<script lang="ts" setup>
  import subTitle from '@/common/components/title/sub-title.vue';
  import pageTitle from '@/common/components/title/page-title.vue';
  import { warning } from '@/common/utils/modal-promise';
  import batchImport from '@/common/components/batch-import/index.vue';
  import dictSelect from '@/common/components/dict-select/index.vue';
  import focusOnWorkBtn from '@/common/components/focus-on-work-btn/index.vue';
  import submitApprovalPage from '@/common/components/submit-approval-page/index.vue';
  import userSelect from '@/common/components/userAndDept/userModal.vue';
  import inputModal from '@/common/components/search-modal/input-modal.vue';
  import { ref, watch } from 'vue';
  import searchItemUser from '@/common/components/search-modal/user.vue';
  import dept from '@/common/components/search-modal/dept.vue';
  import { queryDeptRecordTreeList } from '@/api/system/dept';
  import secretLevelInfo from '@/common/components/secret-level-info/index.vue';
  import secretLevelSelect from '@/common/components/cac-components/secret-level-select/index.vue';
  import { Notification } from '@arco-design/web-vue';
  import fileUpload from '@/common/components/file-upload-page/index.vue';

  const form = ref({
    test: '0',
  });
  const cols = ref([
    {
      title: '姓名',
      dataIndex: 'name',
    },
  ]);
  watch(
    () => form.value,
    () => {
      console.log('form.value', form.value);
    },
    { deep: true, immediate: true }
  );
  const visible = ref(false);
  const visible1 = ref(false);
  const value = ref('Jane Doe');
  const name = ref('');
  const valueObj = ref({});
  const user = ref({});
  const deptData = ref({});
  const fileValue = ref({});
  const fileValueList = ref([]);
  const defaultList = ref([
    {
      name: '一个文件名.word',
      url: 'http://10.191.5.215:9000/yiyan/1717567015367新建 DOCX 文档.docx',
    },
  ]);
  const selectUser = () => {
    visible1.value = true;
  };
  const selectDept = () => {
    visible.value = true;
  };
  const close = () => {
    visible.value = false;
    visible1.value = false;
  };
  const asyncHandle = async () => {
    try {
      await warning({
        title: 'Info Title',
        content: 'This is an nest info message',
        hideCancel: false,
      });
    } catch (e) {
      console.log('点击了取消');
      return;
    }

    console.log('继续确定！');

    try {
      const { data } = await queryDeptRecordTreeList({});

      console.log('data', data);
    } catch (error) {
      Notification.error({
        content: `出现异常！${error}`,
        closable: true,
        duration: 20000,
      });
    }
  };
</script>

<style lang="less" scoped>
  .base-component {
    // height: calc(100% - 48px);
    padding: 24px;
    background: #fff;

    .baserow {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 800px;
      height: 50px;
    }
  }
</style>
